<template>
  <div>
    <!-- 按钮 -->
    <el-button type="primary" icon="el-icon-plus" @click="addClassify"
      >添加</el-button
    >
    <!-- 表格组件 -->
    <el-table
      border
      style="width: 100%; margin-top: 8px"
      :data="goodsClassifyList"
    >
      <el-table-column type="index" label="序号" width="90px" align="center">
      </el-table-column>
      <el-table-column prop="classify" label="分类" width="width">
      </el-table-column>
      <el-table-column prop="prop" label="操作" width="width">
        <template slot-scope="{ row, $index }">
          <el-button
            type="warning"
            icon="el-icon-delete"
            size="mini"
            @click="updateClassify(row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="deleteClassify(row, $index)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 对话框 -->
    <el-dialog
      :title="goodsClassify.id ? '修改分类' : '添加分类'"
      :visible.sync="dialogFormVisible"
    >
      <el-form
        style="width: 80%"
        :model="goodsClassify"
        :rules="rules"
        ref="ruleForm"
      >
        <el-form-item label="分类" label-width="100px">
          <el-input
            autocomplete="off"
            v-model="goodsClassify.classify"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="品牌LOGO" label-width="100px" prop="logoUrl">
          <el-upload
            class="avatar-uploader"
            action="/dev-upload-api/admin/product/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              v-if="tradeForm.logoUrl"
              :src="tradeForm.logoUrl"
              class="avatar"
            />

            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submitClassifyForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      style="margin-top: 30px; text-align: center"
      :current-page="page"
      :page-sizes="[3, 5, 10]"
      :page-size="limit"
      layout=" prev, pager, next, jumper,->,total, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="getPageList"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "goodClassify",
  data() {
    return {
      page: 1,
      limit: 3,
      total: 0,
      list: [],
      //控制对话框的显示与隐藏
      dialogFormVisible: false,
      //表单数据
      goodsClassify: {
        classify: "",
      },
      goodsClassifyList: [], // 分类列表数据
      classify: "", //input框分类名
      type: 0, //0:添加分类,1:修改分类
      //表单验证规则
      rules: {
        tmName: [
          { required: true, message: "请输入品牌名称", trigger: "blur" },
          {
            min: 1,
            max: 6,
            message: "长度在 1 到 6 个字符",
            trigger: "change",
          },
        ],
        logoUrl: [{ required: true, message: "请选择图片" }],
      },
    };
  },
  created() {
    this.getClassify();
  },
  methods: {
    //获取商品分类
    async getClassify() {
      let res = await this.$API.good.reqGetGoodClassify();
      this.goodsClassifyList = res.data;
    },

    //添加按钮事件
    addClassify() {
      this.dialogFormVisible = true;
      this.type = 0;
    },

    //修改分类按钮事件
    updateClassify(row) {
      this.type = 1;
      this.dialogFormVisible = true;
      this.goodsClassify = { ...row };
    },

    //添加或修改分类
    async submitClassifyForm() {
      if (this.type === 0) {
        let res = await this.$API.good.reqAddGoodClassify(
          this.goodsClassify.classify
        );
        if (res.code === "200") {
          this.$message({ message: "添加成功", type: "success" });
          this.getClassify();
          this.classify = "";
          this.dialogFormVisible = false;
        } else {
          this.$message({ message: "添加失败", type: "error" });
        }
      } else {
        let res = await this.$API.good.reqUpdateGoodClassify(
          this.goodsClassify
        );
        if (res.code === "200") {
          this.$message({ message: "修改成功", type: "success" });
          this.getClassify();
          this.dialogFormVisible = false;
          this.goodsClassify = {};
        } else {
          this.$message({ message: "修改失败", type: "success" });
        }
      }
    },

    //删除分类
    deleteClassify(row, index) {
      this.$confirm(`是否删除${row.classify}该分类?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await this.$API.good.reqDeleteClassify(row.id);
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "删除成功",
            });
            this.goodsClassifyList.splice(index, 1);
            // this.getPageList(this.list.length > 1 ? this.page : this.page - 1);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //获取品牌列表数据
    async getPageList(pager = 1) {
      this.page = pager;
      const { page, limit } = this;
      let result = await this.$API.trademark.reqGetTradeMarkList(page, limit);
      //分别展示数据总条数与列表展示的数据
      if (result.code == 200) {
        this.total = result.data.total;
        this.list = result.data.records;
      }
    },

    // handleCurrentChange(page) {
    //   this.page = page;
    //   this.getPageList();
    // },

    //关闭弹窗
    closeDialog() {
      this.goodsClassify = {};
      this.dialogFormVisible = false;
    },
    handleSizeChange(limit) {
      this.limit = limit;
      this.getPageList();
    },

    //提交添加或修改的数据
    submitTradeForm() {
      this.$refs.ruleForm.validate(async (success) => {
        if (success) {
          this.dialogFormVisible = false;
          let result = await this.$API.trademark.reqAddorUpdateTradeMark(
            this.tradeForm
          );
          if (result.code == 200) {
            this.$message({
              type: "success",
              message: this.tradeForm.id ? "修改成功" : "添加成功",
            });
            this.getPageList(this.page);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },

    handleAvatarSuccess(res, file) {
      this.tradeForm.logoUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  mounted() {
    // this.getPageList();
  },
};
</script>

<style >
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>